<template>
  <view class="page">
    <view class="page-hd">
      <view class="tips"
        ><text class="iconfont icon-a-32_32_Barcodescanner"></text
        >请用扫码枪扫码商品条码</view
      >
      <view class="input-area cover-up-input">
        <up-input
          placeholder="请输入串号"
          border="none"
          v-model="data.number"
        ></up-input>
      </view>
      
      <view class="button-area">
        <view
          :class="['ui-button button-style--primary button-size--large', pageData.loading==true ? 'button-function--disabled' : '']"
          @tap="handleScan"
          >{{ pageData.loading==true ? '正在扫码...' : '开始扫码' }}</view
        >
      </view>
    </view>
    <view class="page-bd">
      <ListView
        :data="{list:[1,2,3]}"
        type="custom"
      >
        <view class="list-wrap">
          <view class="cur-number-list m-b--m">

            <CardView>
              <template #hd>
                当前串号
              </template>
              <template #bd>
                <ProductInfoView type="view"></ProductInfoView>
              </template>
            </CardView>
          </view>
          <view class="recorded-number-list">
            <CardView>
              <template #hd>
                已录串号
              </template>
              <template #bd>
                <view class="product-list">
                  <ProductInfoView type="view"></ProductInfoView>
                  <ProductInfoView type="view"></ProductInfoView>
                </view>
              </template>
            </CardView>
          </view>
        </view>
        <template #empty>

        </template>
      </ListView>

    </view>
    <view class="page-ft">
      <view class="info">
        <text class="iconfont icon-a-32_32_bag"></text>
        <text class="text">共盘点2种，28个</text>
      </view>
      <view class="buttons-wrap">
        <view class="ui-button button-style--primary" @click="handleCancel"
          >选好了</view
        >
      </view>
    </view>
    
    <up-modal
      :show="repeatInputModalVisible"
      confirmText="我知道了"
      @confirm="repeatInputModalVisible = false"
    >
      {{ repeatInputModalMsg }}
    </up-modal>
    <!-- inexistence
      -->
    <!-- 不存在弹窗 -->
     <view class="cover-up-modal">
       <up-modal
         :show="inexistenceModalVisible"
         :showCancelButton="true"
         confirmText="手动添加"
         @confirm="handleManuallyAdd"
         cancelText="重新扫描"
         @cancel="handleRescanCode"
       >
       {{inexistenceModalMsg}}
       </up-modal>
     </view>
  </view>
</template>

<script setup>
import ListView from '@/components/base-components/list-view/list-view.vue';
import CardView from '@/components/base-components/card-view/card-view.vue';
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view.vue';
import { ROUTE } from '@/constant/constant';

const { proxy } = getCurrentInstance();
const data = ref({
  number: ''
});

const pageData = ref({
  loading: false,
});
// 重复录入弹窗
const repeatInputModalVisible = ref(false);
// 串号不存在弹窗
const inexistenceModalVisible = ref(true);

const repeatInputModalMsg = ref('当前串号不存在，请重新扫码或手动添加到盘点清单');

const inexistenceModalMsg = ref('当前串号不存在，请重新扫码或手动添加到盘点清单');

// 扫码
const handleScan = () => {
  pageData.value.loading = true;

  setTimeout(() => {
    data.value.number = 'SN62563488299373';
    pageData.value.loading = false;
  }, 1000);
}
// 重新扫码
const handleRescanCode = () => {
  console.log('重新扫码');

  inexistenceModalVisible.value = false;

}
// 手动添加
const handleManuallyAdd = () => {
  console.log('手动添加');
  // 跳转
  proxy.$tab.navigateTo(ROUTE.PAGE_APPS.ADD_TO_COUNT_LIST, { test: '测试参数' })
  inexistenceModalVisible.value = false;
}
</script>
k
<style scoped lang="scss">
@import "@/static/scss/theme.scss";

.page {
  height: 100vh;
  background-color: #F4F8FB;
  // padding: 16rpx 24rpx;
  display: flex;
  flex-direction: column;

  &-hd {
    background-color: #fff;
    padding: 24rpx 32rpx;
    .input-area {
      margin-bottom: 24rpx;
    }
  }
  &-bd {
    flex: 1;
  }
  
  
  &-ft {
    display: flex;
    height: 190rpx;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    border-top: 1rpx solid $border-color;

    .info {
      color: $text-l3-color;
      font-size: 28rpx;
    }

    // .buttons-wrap {
    //   display: flex;
    //   gap: 20rpx;
    //   .ui-button{
    //     // line-height: 40rpx;
    //     // height: 40rpx;
    //   }
    // }
  }

  .tips {
    display: flex;
    padding: 0 80rpx;
    justify-content: center;
    align-items: center;
    gap: 8rpx;
    align-self: stretch;
    height: 40rpx;
    margin: 24rpx 0;
    color: $text-l3-color;
  }


  .list-area {
    padding: 16rpx 24rpx;
  }

  .product-list {
    display: flex;
    flex-direction: column;
    gap:32rpx
  }
}
</style>
